<!--
 * @docName: password.vue
 * @docName: 表单-密码组件
-->
<template>
  <a-input
    v-model="form.password"
    allowClear
    placeholder="请输入密码"
    :type="inputType"
    :autoComplete="autoCom"
    @change="changeInputType"
  >
    <a-icon slot="prefix" type="lock"/>
    <a-icon slot="suffix"
            :type="flag === false ? 'eye-invisible' : 'eye'"
            @click="switchHandle"
    />
  </a-input>
</template>

<script>
export default {
  name: 'password',
  props:['form','initialize'],
  data(){
    return{
      flag: false,
      inputType:'text',
      autoCom: 'off',
    }
  },
  mounted() {
    if (this.initialize){
      this.inputType = 'password';
    }
  },
  methods:{
    //查看密码
    switchHandle(){
      if(this.flag == false){
        this.flag = true;
        this.inputType = 'text';
        this.autoCom = 'off'
      }else{
        this.flag = false;
        this.inputType = 'password';
        this.autoCom = 'new-password'
      }
    },
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !='' && this.flag == false){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
  }
}
</script>

<style scoped lang='less'>

</style>
